<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05-自定义属性操作</title>
</head>

<body>
  <div id="demo" index="我是自定义属性">我是一个div</div>
  <script>
    var div = document.querySelector('div');
    // 1.获取元素属性值
    // a. element.属性
    console.log(div.id);

    // b. element.getAttribute('属性') get得到获取 attribute 属性
    console.log(div.getAttribute('id'));

    // c. 区别比较
    // 相同点：都是可以获取元素属性值的操作方法
    // 不同点：element.属性只能够获取HTML内置属性，而getAttribute可以获取程序员自定义属性(自己定义在标签上的属性，大多数用于标识)
    console.log(div.index); // undefined
    console.log(div.getAttribute('index')); //我是自定义属性

    // 2. 设置属性值
    // a. element.属性 = '值';
    div.index = 'hello'; // 无反应
    div.className = 'navs'; // 设置类属性
    // b. element.setAttribute('属性', '值'); 主要针对于自定属性
    div.setAttribute('index', 'hello'); // 设置成功
    // c. 可以修改类属性
    div.setAttribute('class', 'footer');


    // 3. 移除属性
    // a. removeAttribute(属性)：主要也是针对自定义属性
    div.removeAttribute('index');
  </script>
</body>

</html>